<script setup lang="ts">
import { useAppStore, useCategoryStore } from '@/store';
import { computed, ref } from 'vue';

import type { Category } from '@/views/main/components/types';

const categoryStore = useCategoryStore();
const categories = computed(() => categoryStore.categoriesGetter);

const appStore = useAppStore();
const currentCategoryIndex = computed(
  () => appStore.currentCategoryIndexGetter
);

const isOpenCategory = ref<boolean>(false);
const triggerState = () => {
  isOpenCategory.value = !isOpenCategory.value;
};

const onItemClick = (category: Category) => {
  appStore.changeCurrentCategory(category);
};

defineOptions({ name: 'PCNavigation' });
</script>

<template>
  <div class="sticky top-0 left-0 z-10 w-full bg-white dark:bg-zinc-800">
    <ul
      class="relative mx-auto flex w-[800px] flex-wrap justify-center overflow-hidden overflow-x-auto px-[10px] py-1 text-xs text-zinc-600 duration-300"
      :class="[isOpenCategory ? 'h-[206px]' : 'h-[56px]']"
    >
      <div
        @click="triggerState"
        class="absolute right-1 bottom-1 z-20 cursor-pointer rounded p-1 duration-200 hover:bg-zinc-200 dark:hover:bg-zinc-900"
      >
        <MSvgIcon
          :name="isOpenCategory ? 'fold' : 'unfold'"
          class="h-1 w-1"
          fillClass="fill-zinc-900 dark:fill-zinc-300"
        />
      </div>
      <li
        @click="onItemClick(category)"
        class="z-10 mr-1 mb-1 h-4 shrink-0 cursor-pointer rounded px-1.5 py-0 leading-4 font-bold text-zinc-900 duration-200 hover:bg-zinc-200 dark:text-zinc-500 dark:hover:bg-zinc-900 dark:hover:text-zinc-300"
        :class="{
          'bg-zinc-200 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-300':
            currentCategoryIndex === index
        }"
        v-for="(category, index) in categories"
        :key="category.id"
      >
        {{ category.name }}
      </li>
    </ul>
  </div>
</template>
